export default {
  data() {
    return {
      rolesList: [],
      // 添加角色配置项
      addDialogFormVisible: false,
      addForm: {
        roleName: "",
        roleDesc: ""
      },
      // 效验表单
      Rules: {
        roleName: [
          { required: true, message: "角色名称必填", trigger: "blur" }
        ],
        roleDesc: [{ required: true, message: "角色描述必填", trigger: "blur" }]
      },
      // 编辑角色配置项
      editDialogFormVisible: false,
      editForm: {
        roleName: "",
        roleDesc: ""
      },
      // 分配权限配置项
      rightDialogFormVisible: false,
      rightsTreeData: [],
      checkedIdArr: [],
      defaultProps: {
        children: "children",
        label: "authName"
      },
      rightsRoleId: null
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const {
        data: { data, meta }
      } = await this.$http.get("roles");
      if (meta.status !== 200) return this.$message.error("获取角色列表失败");
      this.rolesList = data;
    },
    // 显示添加角色对话框
    openAddDialog() {
      this.addDialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.addForm.resetFields();
      });
    },
    // 添加角色请求
    addRole() {
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          const {
            data: { meta }
          } = await this.$http.post("/roles", this.addForm);
          if (meta.status !== 201) return this.$message.error("添加角色失败");
          this.getData();
          this.addDialogFormVisible = false;
        }
      });
    },
    // 删除角色
    delRole(roleId) {
      this.$confirm("亲，是否删除该角色?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const {
            data: { meta }
          } = await this.$http.delete(`roles/${roleId}`);
          if (meta.status !== 200) return this.$message.error("删除角色失败");
          this.getData();
        })
        .catch(() => null);
    },
    // 显示编辑角色对话框
    openEditDialog(row) {
      this.editDialogFormVisible = true;
      this.$nextTick(() => {
        // 重置表单（数据 样式）
        this.$refs.editForm.resetFields();
        // 填充数据 row
        // 将来提交请求需要ID
        this.editForm.id = row.id;
        this.editForm.roleName = row.roleName;
        this.editForm.roleDesc = row.roleDesc;
      });
    },
    // 编辑请求
    editRole() {
      this.$refs.editForm.validate(async valid => {
        if (valid) {
          const {
            data: { meta }
          } = await this.$http.put(`roles/${this.editForm.id}`, {
            roleName: this.editForm.roleName,
            roleDesc: this.editForm.roleDesc
          });
          if (meta.status !== 200) return this.$message.error("编辑角色失败");
          // 成功
          this.editDialogFormVisible = false;
          this.getData();
        }
      });
    },
    delRights(row, rightId) {
      this.$confirm("亲，是否删除该权限？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const {
            data: { data, meta }
          } = await this.$http.delete(`roles/${row.id}/rights/${rightId}`);
          if (meta.status !== 200)
            return this.$message.error("角色删除权限失败");
          row.children = data;
        })
        .cath(() => null);
    },
    async openRightsDialog(row) {
      const {
        data: { data, meta }
      } = await this.$http.get("rights/tree");
      if (meta.status !== 200) return this.$message.error("获取权限数据失败");
      this.rightsTreeData = data;
      let arr = [];
      // 只需要第三级的权限ID
      row.children.forEach(item => {
        item.children.forEach(subItem => {
          subItem.children.forEach(lastItem => {
            // 添加ID给arr数组
            arr.push(lastItem.id);
          });
        });
      });
      this.checkedIdArr = arr;
      this.rightsRoleId = row.id;
      this.rightDialogFormVisible = true;
    },
    async disRights() {
      const checkedArr = this.$refs.tree.getCheckedKeys();
      // 2. 获取半选的权限的ID方式
      const halfCheckedArr = this.$refs.tree.getHalfCheckedKeys();
      // 3. 合并
      const arr = [...checkedArr, ...halfCheckedArr];
      // 4. 角色ID this.rightsRoleId
      const {
        data: { meta }
      } = await this.$http.post(`roles/${this.rightsRoleId}/rights`, {
        rids: arr.join(",")
      });
      if (meta.status !== 200) return this.$message.error("角色权限分配失败");
      this.getData();
      this.rightDialogFormVisible = false;
      this.$message.success("角色权限分配成功");
    }
  }
};
